<script setup>
import {taskStore} from '@pi/task';
import {userStore} from '@pi/user';
import {onMounted, reactive} from "vue";
import {baseURL} from "@ut/tool.js";

let task = taskStore();
let user = userStore();
let options = reactive({pageNo: 1, pageSize: 10, state: 0, uid: user.info.id});
let state = reactive([
    {label: '未打卡', type: 'warning'},
    {label: '已打卡', type: 'primary'},
    {label: '请假', type: 'primary'},
    {label: '缺勤', type: 'danger'},
]);
let ask = reactive({
    show: false,
    form: {},
    rules: {},
    open(row) {
        ask.form = {...row};
        ask.show = true;
    },
    close() {
        ask.show = false;
    }
})

// 打卡
async function clock(row) {
    let form = {...row};
    delete form.task;
    form.state = 1;
    await task.clock(form);
    task.getUserTask(options);
}

// 文件上传成功
function upSuccess({data}) {
    ask.form.excuse = data;
}

// 请假
async function askSubmit() {
    let form = {...ask.form};
    delete form.task;
    form.state = 2;
    await task.clock(form);
    task.getUserTask(options);
    ask.close();
}

onMounted(() => {
    task.getUserTask(options);
})
</script>

<template>
    <h5 class="title">考勤任务</h5>
    <div class="btn">
        <el-select v-model="options.state" @change="task.getUserTask(options)" size="small" style="width: 120px;">
            <el-option v-for="(item, index) in state" :key="index" :label="item.label" :value="index" />
        </el-select>
    </div>
    <el-table :data="task.userTask" style="height: calc(100% - 100px)" size="small" border stripe show-overflow-tooltip>
        <el-table-column prop="id" label="编号" align="center" />
        <el-table-column prop="task.id" label="任务编号" align="center" />
        <el-table-column prop="task.name" label="任务名" align="center" />
        <el-table-column prop="task.st" label="开始时间" align="center" />
        <el-table-column prop="task.et" label="结束时间" align="center" />
        <el-table-column prop="time" label="打卡时间" align="center" />
        <el-table-column label="打卡时间" align="center">
            <template #default="{row}">
                <el-tag :type="state[row.state].type">{{ state[row.state].label }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" fixed="right">
            <template #default="{row}">
                <el-button type="primary" link icon="Edit" @click="clock(row)" v-if="!row.state">打卡</el-button>
                <el-button type="success" link icon="Edit" @click="ask.open(row)" v-if="row.state === 0 || row.state === 3">请假申请</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="task.userTaskTotal" small @current-change="task.getUserTask(options)" v-model:current-page="options.pageNo" :page-size="options.pageSize" />
    </div>

    <el-dialog title="请假" v-model="ask.show" width="600px" @close="ask.close" draggable>
        <el-form ref="formRef" :model="ask.form" :rules="ask.rules" label-width="80px">
            <el-form-item label="上传假条">
                <el-upload drag :action="baseURL + '/file/up'" :data="{type: 'file'}" :limit="1" accept=".jpg,.jpeg,.png" multiple :on-success="upSuccess" style="width: 100%;">
                    <el-icon class="el-icon--upload">
                        <upload-filled />
                    </el-icon>
                    <div class="el-upload__text">拖拽或 <em>点击上传文件</em></div>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="askSubmit" :disabled="!ask.form.excuse">保存</el-button>
            <el-button @click="ask.close">取消</el-button>
        </template>
    </el-dialog>
</template>

<style scoped lang="less">

</style>